<template>
	<view class="home">
		<image class="bg-img" src="@/static/home/login.jpg"></image>
		<view class="text">
			<image class="bom" src="@/static/home/0033.png" mode=""></image>
			<!-- 			<view class="">
				您好,
			</view>
			<view class="bom">
				欢迎使用明渠智侧
			</view> -->
		</view>
		<view class="input">
			<view class="boder">
				<uni-easyinput :inputBorder="false" :styles="styles" prefixIcon="person-filled" v-model="username"
					placeholder="请输入账号">
				</uni-easyinput>
			</view>
		</view>
		<view class="input">
			<view class="boder">
				<uni-easyinput :inputBorder="false" :styles="styles" prefixIcon="locked-filled" v-model="password"
					placeholder="请输入密码">
				</uni-easyinput>
			</view>
		</view>
		<view class="button">
			<u-button type="primary" shape="circle" text="登录" @click="login"></u-button>
		</view>
<!-- 		<view class="bom_text">
			河北浩水科技有限公司
		</view> -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '132',
				username: "admin",
				password: "admin123",
				styles: {
					color: '#333', //输入文字颜色
					borderColor: '#666' //边框颜色
				}
			}
		},
		onLoad(option) {
			this.username = this.vuex_usernameLogin,
				this.password = this.vuex_passwordLogin
		},
		methods: {
			login() {
				uni.showToast({
					title: '登录中...',
					icon: 'loading',
					mask: true,
					duration: 500
				});
				uni.$u.http.post('/login', {
					"username": this.username,
					"password": this.password
				}).then(res => {
					if (res.code !== 200) {
						this.$refs.uToast.show({
							type: 'error',
							position: 'top',
							icon: false,
							message: '账号密码错误'
						})
					}
					console.log(res);
					if (res.code == 200) {
						uni.hideLoading()
						console.log('获取---', res)
						uni.$u.vuex('vuex_token', res.token)
						uni.$u.vuex('vuex_login', 1)
						uni.$u.vuex('vuex_usernameLogin', this.username)
						uni.$u.vuex('vuex_passwordLogin', this.password)
						this.userFn()
						uni.switchTab({
							url: '/pages/home/index'
						});

					}
				}).catch(err => {
					console.log('错误', err);
				})
			},
			// 用户信息
			userFn() {
				uni.$u.http.get('/system/user/profile').then(res => {
					console.log('res', res);
					if (res.code == 200) {
						uni.$u.vuex('vuex_user', res.data)
					}
				}).catch(err => {
					console.log('错误', err);
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	.home {
		height: 100vh;
		position: relative;

		.text {
			display: flex;
			justify-content: center;

			// padding: 100rpx 60rpx;
			// font-size: 60rpx;
			.bom {
				margin: 0 auto;
				width: 650rpx;
				height: 650rpx;
			}
		}

		.bg-img {
			position: absolute;
			width: 750rpx;
			height: 100vh;
			z-index: -1;
		}

		.input {
			padding: 20rpx 60rpx;
			background-color: rgba(255, 255, 255, 0.0);

			.boder {
				border-bottom: #b0b0b0 solid 1rpx;
			}
		}

		.button {
			padding: 60rpx;
		}

		.bom_text {
			width: 750rpx;
			text-align: center;
			position: absolute;
			bottom: 5vh;
			color: #95a4ad;
			letter-spacing: 20rpx;
		}
	}
</style>
<style>
	page {
		/* background-color: #333c4d; */
	}
</style>